<template>
  <div id="header1" class="" avalonctrl="vmCommon">
    <div class="head-top clear head-top1">
      <div class="fl top-left">
        <a href="#">
          <img style="width:200px" src="/uploads/images/logo/logo_pc.png"></a>
      </div>
      <div class="fr top-right">
        <ul id="home-menu" class="wrap-list clear">
          <router-link tag="li" to="/" exact-active-class="active" id="nav-sy">首页</router-link>
          <router-link tag="li" to="/cl/recommend" active-class="active" id="nav-trade">创建策略</router-link>
          <!-- <li active-class="active" id="nav-taste">一元体验</li> -->
          <!-- <li active-class="active" id="nav-cgds">炒股大赛</li> -->
          <!-- <li active-class="active" id="nav-gsgz">高手跟踪</li> -->
          <router-link tag="li" to="/compangMsg" active-class="active" id="nav-about">关于我们</router-link>
          <router-link tag="li" to="/newplayer" active-class="active" id="nav-new">新手指导</router-link>

          <router-link tag="li" to="/me" active-class="active" v-if="login" id="nav-account">
            <router-link tag="a" active-class="active" to="/me" id="nav-person">个人中心</router-link>
          </router-link>
          <li v-if="login" @click="exit">安全退出</li>
          <li v-if="!login">
            <router-link tag="a" to="/login/register">注册</router-link>
          </li>
          <li v-if="!login">
            <router-link tag="a" to="/login/login">登录</router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from "@/common/js/Axios";
export default {
  mounted() {
    this.isLogin();
  },
  data() {
    return {
      //图片部分开始
      loginImg: require("@/assets/login/images/logo-login.png"),
      //图片部分结束
      login: false,
      token:localStorage.getItem("Authorization")
      
    };
  },
  methods: {
    //退出登录
    exit() {
      localStorage.removeItem("Authorization");
      this.$router.go(0);
    },
    //判断是否登录
    isLogin() {
      //表面上是一个请求历史记录的接口，实际上他就是一个请求历史记录的接口
      //但是用来判断登录token是否失效还是ojbk的
      Axios.getAxios(
        "/api/strategyHistory/normal",
        {
          page: this.page
        },
        {
          Authorization: "Bearer " + this.token
        }
      ).then(
        res => {
          this.login = true;
        },
        err => {
          this.login = false;
        }
      );
    }
  }
};
</script>

<style lang="stylus" scoped>
#home-menu li {
  cursor: pointer;
  font-size :14px;
  color #000
}
#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55px;
  padding: 8px 0;
  border-bottom: 1px solid #3b506a;
  z-index: 999999;
}
#header1 {
  width: 100%;
  height: 60px;
  padding: 8px 0;
  background: #fff;
  padding-bottom: 2px;
}
.head-top {
  width: 1200px;
  margin: auto;
}
.head-top .top-left a {
  display: block;
  margin-top: 2px;
}
.head-top .top-right ul li {
  float: left;
  line-height: 55px;
  margin-left: 30px;
  border-bottom: 2px solid transparent;
}
.head-top .top-right ul li a {
  color: #fff;
}
.head-top1 .top-right ul li a {
  color: #333;
  text-decoration: none;
}
.head-top .top-right ul li.active, .head-top .top-right ul li:hover {
  border-color: #0083ff;
}
.head-top .top-right ul li.active a, .head-top .top-right ul li:hover a {
  color: #0083ff;
}
.contianer-banner img {
  width: 100%;
  min-width: 1200px;
}
#nav-account:hover .self-tank {
  display: block;
}
/* 导航 */
.position-dh {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  height: 80px;
}
.active{
  border-color: #0083ff;
}
.posi-dh {
  background: #f7f7f7;
  height: 85px;
  border-bottom: 1px solid #CCCCCC;
}
.posi-dh .list-left, .posi-dh .list-right {
  /* line-height:80px; */
}
.posi-dh .list-left {
  margin-top: 10px;
}
.posi-dh .list-left, .posi-dh .list-right span {
  /* line-height: 90px; */
}
.list-daohang {
  width: 1200px;
  height: 80px;
  margin: 0 auto;
}
.list-left {
  float: left;
  /* line-height: 80px; */
  margin-top: 20px;
}
.list-right {
  width: 760px;
  float: right;
  height: 30px;
  /* line-height:100px; */
  margin-top: 30px;
}
.list-right span {
  display: inline-block;
  float: right;
  width: 170px;
  color: #fff;
}
.agio-right span {
  color: #000;
}
.list-right span a {
  color: #fff;
  padding: 0px 5px;
}
.agio-right span a {
  color: #ab9b4d;
  display: inline-block;
  border: 1px solid #ab9b4d;
  margin-right: 6px;
  width: 65px;
  text-align: center;
  height: 20px;
  line-height: 20px;
}
.agio-right span a.zhu {
  background: #ab9b4d;
  color: #fff;
}
.list-right ul li {
  display: inline-block;
  margin-left: 15px;
  border-bottom: 5px solid transparent;
  padding-bottom: 28px;
}
.list-right ul li a {
  color: #fff;
}
.list-right ul.agio-list li a {
  color: #ab9b4d;
}
.list-right ul li.active {
  border-bottom: 5px solid #FE2F5B;
}
.list-right ul li.active a, .list-right ul li:hover a {
  color: #FE2F5B;
  text-decoration: none;
}
.list-right ul li:hover {
  border-bottom: 5px solid #FE2F5B;
}
.self-tank {
  position: absolute;
  top: 55px;
  width: 240px;
  background: #fff;
  color: #000;
  border-radius: 8px;
  display: none !important;
  z-index: 999999;
}
#nav-account:hover .self-tank {
  display: block !important;
}
.self-tank p.zhye, .self-tank p.chonngzhi {
  padding-top: 10px;
  padding-left: 10px;
}
.self-tank p {
  height: 30px;
  line-height: 20px;
}
.self-tank p.chonngzhi a {
  color: #72c86d !important;
  margin-left: 20px;
}
.self-tank p.self-center {
  background: #999;
  width: 100%;
  height: 100px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.self-tank p.self-center a {
  display: inline-block;
  width: 45%;
  text-align: center;
  padding: 10px 0;
  color: #fff !important;
}
</style>
